<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let m = {
            name: 'zf',
            age : 18
        }



        //这就是Proxy的原理，相比于ObjectdefineProperty，Proxy可以代理任意对象，并且可以代理任意属性，并且可以代理任意操作。
        const p = new Proxy(m,{
            get(Target,Property){
                console.log('有人读对象了',Target,Property)
                return Target[Property]
            },
            set(Target,Property,value){
                console.log('有人改对象了',Target,Property,value)
                Target[Property] = value
            },
            deleteProperty(Target,Property){
                console.log('有人删除属性了')
                delete Target[Property]
            }
        })

        //上面那版只是微缩版
        const p2 = new Proxy(m,{
            get(Target,Property){
                console.log('有人读对象了',Target,Property)
                Reflect.get(Target,Property)
            },
            set(Target,Property,value){
                console.log('有人改对象了',Target,Property,value)
                Reflect.set(Target,Property,value)
            },
            deleteProperty(Target,Property){
                console.log('有人删除属性了')
                Reflect.deleteProperty(Target,Property)
            }
        })

    </script>
</body>
</html>